<template>
  <div class="cafeteria-events">
    <h1>食堂活动</h1>
    <div v-if="loading" class="loading">
      Loading...
    </div>
    <div v-else class="event-lists">
      <div class="event-card" v-for="event in events" :key="event.id" @click="showEventDetail(event)">
        <img :src="getImageUrl(event.image_url)" alt="Event image" class="event-image"/>
        <div class="event-info">
          <h3>{{ event.title }}</h3>
          <p class="event-date" v-text="event.start_date + ' -  ' + event.end_date"></p>
          <p class="event-summary">{{ event.summary }}</p>
        </div>
      </div>
    </div>
    <!-- Event Detail Modal -->
    <EventDetailModal v-if="showModal" :event="selectedEvent" @close="closeModal"/>
  </div>
</template>

<script>
import EventDetailModal from '../../components/EventDetailCard.vue';
import { getCurrentEvents } from '@/api/events';
import { baseURL } from '@/utils/request';
import { getAccessToken } from '@/utils/auth'; // Import the method to get the access token



export default {
  name: 'CafeteriaEvents',
  components: {
    EventDetailModal
  },
  data() {
    return {
      events: [],
      loading: false,
      selectedEvent: null,
      showModal: false // 控制模态弹窗的显示和隐藏
    };
  },
  methods: {
    getImageUrl(path) {
      return `${baseURL}${path}`;
    },
    async fetchEvents() {

      const token = this.getAccessToken();
      if (!token) {
        alert('请登录');
        return;
      }
      this.loading = true;
      try {
        const response = await getCurrentEvents();
        this.events = response.data;
      } catch (error) {
        console.error('Error fetching events:', error);
      } finally {
        this.loading = false;
      }
    },
    showEventDetail(event) {
      this.selectedEvent = event;
      this.showModal = true; // 显示模态框
    },
    closeModal() {
      this.showModal = false;
      this.selectedEvent = null;
    },


    getAccessToken() {
      // 从utils/auth.js引入getAccessToken方法
      return getAccessToken();
    }
  },
  mounted() {
    this.fetchEvents();
  }
};
</script>

<style>

.cafeteria-events {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.event-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.event-card:hover {
  transform: translateY(-5px);
}

.event-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.event-info {
  padding: 15px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2em;
  color: #333;
}

.event-date {
  color: #666;
  font-size: 0.9em;
}

.event-summary {
  margin-top: 10px;
  color: #444;
  line-height: 1.5;
}

.loading {
  text-align: center;
  padding: 50px 0;
  font-size: 1.2em;
  color: #666;
}
</style>
